<template>
 <div class="container">
    <div class="ty" style="justify-content: center;">
        {{ msg }}
    </div>
    <div class="tr">
        <button @click="start">开始</button>
        <button @click="stop">结束</button>
    </div>
 </div>
</template>
<script>
 export default {
 name: '',
 data: function(){
 return {
    msg:"666!",
    handle:null
 }
 },
 methods:{
    start:function(){
        if(this.handle){
            return;
        }

        this.handle = setInterval(() =>{
                var start = this.msg.substring(0,1);
                var other = this.msg.substring(1);
                this.msg = other + start;
        },500);
    },
    stop:function(){
        clearInterval(this.handle);
        this.handle = null;
    }
 }
 }
</script>
<style>
html,
 body, 
 #app{
 height: 100%;
 }
</style>
<style scoped>
 .container {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 width: 100%;
 height: 100%;
 background-color: aliceblue;
 }
 .tr{
 width: 200px;
 flex-basis: 50px;
 display: flex;
 flex-direction: row;
 justify-content: space-between;
 background-color: beige;
 align-items: center;
 }
 .second{
 background-color: aqua;
 }
</style>